<template>
	<view>
		<!-- 头部显示 -->
		<view class="header">
			<span>{{form.name}}</span>
			<button size="mini" class="change_btn" @click="save">保 存</button>
		</view>
		<swiperTabHead :tabBars="tabList" :tabIndex="tabIndex" @tabtap="tabtap" class="swiper-header"></swiperTabHead>

		<!-- 水印设置 --> 
		<view v-if="tabIndex == 0">
			<uni-forms ref="ruleForm" :modelValue="form" :rules="rules" label-width="180rpx" type="line" label-align="right" class="paddingAll">
				<uni-forms-item label="水印管理员" name="manageIds">
					<custom-tree-select mutiple dataLabel="label" :choseParent="false" :childernDisabled="true" placeholder="请选择模板管理员" :listData="deptOptions" v-model="defaultManage" />
				</uni-forms-item>
				<uni-forms-item label="水印名称" name="name">
					<uni-easyinput v-model="form.name" type="text" placeholder="请输入水印名称" :disabled="form.isSystem==1"/>
				</uni-forms-item>
				<uni-forms-item label="水印使用人" name="departmentIds">
					<custom-tree-select mutiple dataLabel="label" :disabled="form.isSystem==1" v-model="defaultDepart" 
					:listData="deptOptions" @selectChange="selectDep" :placeholder="form.isSystem==1?$store.getters.companyInfo.name:'请选择水印使用人'"/>
				</uni-forms-item>
				<uni-forms-item label="合同类型" name="contractTypeId">
					<uni-data-select v-model="form.contractTypeId" :localdata="contractArr" :disabled="form.isSystem==1" :clear="false" :placeholder="form.isSystem==1?'全部类型':'请选择合同类型'" />
				</uni-forms-item>
				<uni-forms-item label="水印状态" name="status">
					<uni-data-checkbox v-model="form.status" :localdata="setArr" />
				</uni-forms-item>
			</uni-forms>
		</view>

		<!-- 添加水印 -->
		<add-watermaek v-if="tabIndex == 1" :dataform="form"></add-watermaek>
	</view>
</template>

<script>
	import { addWaterMark,getWaterMark,updateWaterMark } from "@/api/ec/console/busiConfig/waterMark";
	import { treeSelectAndStaff } from "@/api/ec/console/org/dept";
	import swiperTabHead from "@/components/slideTab/slideTab";
	import {getHost, uniqueArr} from "@/utils";
	import addWatermaek from "./addWatermaek";
	import { listByCompanyId } from "@/api/ec/console/busiConfig/contractType";
	export default {
		components: { swiperTabHead,addWatermaek },
		data() {
			return {
				selectData: [], //选中的数据 包括员工和部门数据
				defaultDepart:[], //默认显示的水印使用人 
				defaultManage:[], //默认显示的水印管理员
				contractArr: [], //合同类型
				deptOptions: [],
				// 水印状态
				setArr: [{
						text: '启用',
						value: 1
					},
					{
						text: '停用',
						value: 0,
						disabled:false
					}
				],
				form: {
					status: 1,
					// 默认18
					qrCodeSize:18,
					// 默认右上角
					qrCodePosition:0,
					viewAuth: 0,
					departmentIds: [],
					contractNumberFontSize:14,
					contractNumberPosition:0,
					contractNumberAlpha:50,
					contractWaterMarkTxtImgList: [],        
				},
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: "请输入水印名称",
							trigger: "blur"
						}, ]
					},
					manageIds: {
						rules: [{
							required: true,
							errorMessage: "请选择水印管理员",
							trigger: "blur"
						}, ]
					},
					departmentIds: {
						rules: [{
							required: true,
							errorMessage: "请选择水印使用人",
							trigger: "blur"
						}, ]
					},
					contractTypeId: {
						rules: [{
							required: true,
							errorMessage: "请选择合同类型",
							trigger: "blur"
						}, ]
					},
					status: {
						rules: [{
							required: true,
							errorMessage: "请选择水印状态",
							trigger: "blur"
						}, ]
					},
				},
				tabList: [{
					title: '水印设置'
				}, {
					title: '添加水印'
				}, {
					title: '预览水印'
				}],
				tabIndex: 0,
			}
		},
		onLoad(option) {
			// 合同类型 
			this.getContractType()
			this.getTreeSelect()
			// 编辑
			if (option.id) {
				this.form.id = option.id
			} else {
               this.$modal.loading();
			}
		},
		methods: {
			// 选择水印使用人
			selectDep(e){
				this.selectData = e;    
			},
			/** 保存 */
			save(){
					this.form.contractWaterMarkUseList = this.selectData;
					if(!!this.form.manageIds){
					    this.form.manageIds = this.defaultManage
					}
					// 当前公司只有一个isSystem=1 的数据 其他都是为0 修改的是1 如果获取的是公共水印 则进行添加 其他都是修改
					if (this.form.id == 1) {
					    this.form.id = null;
					    addWaterMark(this.form).then(response => {
					      this.$modal.msgSuccess("保存成功");
					      this.form.id = response.data;
					      this.form.companyId = this.$store.getters.companyId;
					    });
					  } else if (this.form.id != null) {
					    updateWaterMark(this.form).then(response => {
					      this.$modal.msgSuccess("修改成功");
					    });
					  } 
					//   else { 
					//     // 若添加水印 水印总数是1 并且是系统公共数据 则 先添加一个系统水印 再添加一个当前水印
					//     if (this.$route.query.totalNum == 1 && this.$route.query.companyId==-1) {
					//       let param = JSON.parse(JSON.stringify(this.form));
					//       param.isSystem = 1;
					//       param.name="电子签约基础数据水印";
					//       addWaterMark(param).then(response => {
					//       });
					//     }
					//     this.form.isSystem=0;
					//     addWaterMark(this.form).then(response => {
					//       this.$modal.msgSuccess("保存成功");
					//       this.form.id = response.data;
					//       this.form.companyId = this.$store.getters.companyId;
					//     });
					// }
					uni.navigateBack(1)
					uni.$emit('refresh','')
			},
			initData() {
                 this.$modal.loading();
				if (!this.form.id) {
                    this.$modal.loading();
				    return;
				 }
				getWaterMark(this.form.id).then(response => {
					uni.hideLoading()
					this.form = response.data
					// 状态是否禁用
					if(this.form.isSystem == 1){
						this.setArr[1].disabled = true
					}
					
			        this.selectData=[];
			        if(!!this.form.manageIds){
			          this.form.manageIds = this.form.manageIds.split(",").map(d=>{return parseInt(d)});
			        } else {
			          this.form.manageIds=[];
			        }
					
			        // 添加法人 管理员
			        let legalId = this.$store.getters.staffInfo.legalId;
			        let adminId = this.$store.getters.staffInfo.adminId;
			        if(legalId!=0 && legalId!=adminId){
			          this.form.manageIds.push(this.$store.getters.staffInfo.legalId);
			        }
			        this.form.manageIds.push(adminId);
			        this.form.manageIds = uniqueArr(this.form.manageIds);
					// 水印管理员
					this.defaultManage = this.form.manageIds.toString()
					
					// 使用人id  使用人部门级别 使用人名称
			        this.form.contractWaterMarkUseList.forEach(userData=>{
			          this.selectData.push({id:userData.staffOrDeptId, level:userData.level,label:userData.label})
			          this.form.departmentIds.push(userData.staffOrDeptId);
			        });
					// 水印使用人
					this.defaultDepart = this.form.departmentIds.toString()
				})
			},
			/** 合同类型 */
			getContractType() {
				// 根据当前登录公司 查询合同类型
				listByCompanyId().then((response) => {
					var list = []
					for (var i = 0; i < response.data.length; i++) {
						var object = {};
						object.text = response.data[i].name; // 展示text
						object.value = response.data[i].id; // 用id查询
						list.push(object);
					}
					this.contractArr = list
					this.form.contractTypeId = this.contractArr[0].value;
				})
			},
			/** 查询部门下拉树结构 */
			getTreeSelect() {
                this.$modal.loading();
				let data = {
					isCertify: 1,
					status: 1
				}
				treeSelectAndStaff(data).then(response => {
					uni.hideLoading()
					this.deptOptions = response.data
					this.initData()
				});
			},
			/** 接受子组件传过来的值点击切换导航 */
			tabtap(index) {
				var _this = this
				_this.tabIndex = index;
			},
		}
	}
</script>

<style lang="scss" scoped>	
	::v-deep .uni-data-checklist .checklist-group .checklist-box {
		margin: 20rpx 20rpx 0;
	}

	.swiper-header ::v-deep .uni-scroll-view-content {
		display: flex;
		justify-content: space-between;
		width: 92%;
		margin: 0 auto; 
	}

	::v-deep .uni-forms-item {
		margin-bottom: 36rpx; 
	}

	.paddingAll {
		margin-top:40rpx;
		padding: 0 30rpx 0 10rpx;
	}

	page {
		background: $uni-bg-color;
		position: relative !important;
	}

	.header {
		background: #bde8bf;
		height: 70rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;

		span {
			width: 80%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.change_btn {
		background: #fff;
		margin-right: 0;
		height: 50rpx;
		line-height: 50rpx;
	}
</style>
